<script>
import {defineComponent} from 'vue'
// 引入Header组件
import Header from "@/components/Header.vue";

// 引入Main组件
import Main from "@/components/Main.vue";

// 引入Footer组件
import Footer from "@/components/Footer.vue";

export default defineComponent({
  // name属性：用于显式声明组件展示时的名称。
  name: "App",
  //data函数：用于声明组件初始响应式状态的函数(必须return一个新对象)
  data() {
    return {
      persons: {
        name: "陶品奇",
        age: 22,
        address: "湖南省"
      }
    }
  },

  // methods:用于声明要混入到组件实例中的方法
  methods: {
    getComponent() {
      //在父组件中使用$refs拿到组件实例
      console.log(this.$refs.HeaderComponent)
      console.log(this.$refs.MainComponent)
      console.log(this.$refs.FooterComponent)
      //在父组件中使用$refs拿到组件实例调用子组件的方法
      this.$refs.HeaderComponent.HeaderMethods()
      this.$refs.MainComponent.MainMethods()
      this.$refs.FooterComponent.FooterMethods()
      //使用$refs拿到元素
      console.log(this.$refs.divElement)
    }
  },
  // components：一个对象，用于注册对当前组件实例可用的组件
  components: {
    Header,
    Main,
    Footer
  },
})
</script>

<template>
  <div class="app">
    <!--使用Header、Main、Footer，这三个组件是App的子组件-->
    <div ref="divElement">我是App组件</div>
    <!--使用ref标识组件实例,使用的时候this.$refs.名字即可-->
    <Header ref="HeaderComponent"></Header>
    <Main ref="MainComponent"></Main>
    <Footer ref="FooterComponent"></Footer>
    <button @click="getComponent">拿到Header\Main\Footer组件的实例</button>
  </div>
</template>

<style lang="less">

</style>
